<template>
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in carouselChartData" :key="item.id">
      <img :src="item.pic_url" alt="" />
    </van-swipe-item>
  </van-swipe>
  <!-- 商品 -->
  <!-- 热销产品 -->
  <Goods :goodsList="hotGoods" title="热销商品"></Goods>
  <!-- 最新上架 -->
  <Goods :goodsList="newGoods" title="最新商品"></Goods>
</template>

<script setup>
import { getCarouselChartData, getGoodsList } from "@/api/home";
import { ref, onMounted } from "vue";

// 轮播图数据
const carouselChartData = ref([]);
// 商品
const hotGoods = ref([]);
const newGoods = ref([]);

onMounted(async () => {
  // 获取轮播图
  let res = await getCarouselChartData({ limit: "10", page: "1" });
  carouselChartData.value = res.data.list;
  // 获取商品列表
  hotGoods.value = (
    await getGoodsList({ limit: "10", page: "1", sort: "sale" })
  ).data.list;
  newGoods.value = (
    await getGoodsList({ limit: "10", page: "1", sort: "recent" })
  ).data.list;
});
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  img {
    width: 100%;
  }
}
</style>